<template>
  <div class="work-environment">
    <div class="left">
      <div class="item" v-for="item in conditionList" :key="item.name">
        <img :src="item.icon" class="icon" />
        <div class="text">
          <div class="title">{{ item.description }}</div>
          <div class="value">{{ item.layerValue }}</div>
        </div>
      </div>
    </div>
    <div class="right">
      <RadarChart layerId="82" :chartData="chartData" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getLayerIds } from '@/api/position';
import RadarChart from './RadarChart.vue';

const props = defineProps({
  positionId: {
    type: String,
    default: '',
  },
});

const iconList = ref([
  'https://img3.job1001.com/data_center/images/工作时长.svg',
  'https://img3.job1001.com/data_center/images/工作安排.svg',
  'https://img3.job1001.com/data_center/images/加班频率.svg',
  'https://img3.job1001.com/data_center/images/休息时间.svg',
]);
const conditionList = ref([]);

const chartData = ref({
  chartNameData: [],
  chartValueData: [],
});

const getLayerIdsFn = async () => {
  const params = {
    positionId: props.positionId,
    questionIds: '68,70',
  };
  const res = await getLayerIds(params);
  if (res.code === 200) {
    const temp1 = res.data[68];
    temp1.forEach((item, index) => {
      item.icon = iconList.value[index];
    });
    conditionList.value = temp1;

    const temp2 = res.data[70];
    chartData.value.chartNameData = temp2.map((item) => {
      return {
        description: item.description,
        max: 5,
        value: item.layerValue,
      };
    });
    chartData.value.chartValueData = temp2.map((item) => {
      return item.layerValue;
    });
  }
};

onMounted(() => {
  getLayerIdsFn();
});
</script>

<style scoped lang="scss">
.work-environment {
  width: 100%;
  height: 100%;
  padding: 40px;
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  gap: 36px;
  .left {
    height: 100%;
    width: 50%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    align-items: center;
    grid-auto-rows: 180px;
    box-sizing: border-box;
    padding-top: 11%;
    .item {
      display: flex;
      align-items: center;
      gap: 24px;
      .icon {
        width: 76px;
        height: 76px;
      }
      .text {
        .title {
          font-size: 24px;
          color: #666;
          margin-bottom: 16px;
        }
        .value {
          font-size: 26px;
          color: #333;
        }
      }
    }
  }
  .right {
    width: 50%;
    height: 100%;
  }
}
</style>
